<script setup lang="ts">
import { reactive, onMounted, nextTick } from "vue";
import api from "@/api/blog/comment";
import { ElMessage } from "element-plus";
import { useCommpnStore } from "@/stores/common";
import util from "@/utils/utils";
const useStore = useCommpnStore();
const props = defineProps({
    blog_id: {},
});

type stringKey = Record<string, any>;
let state: stringKey = reactive({
    content: "",
    list: [],
    loading_submit: false,
    loading_reply: false,
    replyId: -1,
    reply: "",
});
onMounted(() => {
    getComment();
});
const reply = async (parent: any = null, root: any = null) => {
    if ((!parent && !state.content) || (parent && !state.reply)) {
        ElMessage({ message: "评论不能为空！", type: "warning" });
        return;
    }
    try {
        let data = {
            blog_id: props.blog_id || -1,
            root_id: parent ? (parent.root_id ? parent.root_id : parent._id) : null,
            parent_id: parent ? parent._id : null,
            content: parent ? state.reply : state.content,
            token: localStorage.getItem("token"),
        };
        let res: any = await api.add(data);
        parent ? (state.reply = "") : (state.content = "");
        parent ? (state.loading_reply = false) : (state.loading_submit = false);
        ElMessage({ message: res.msg, type: "success" });
        state.replyId = null;
        getComment();
    } catch (err) {
        parent ? (state.loading_reply = false) : (state.loading_submit = false);
    }
};
const getComment = async () => {
    let res: any = await api.getlist({ blog_id: props.blog_id });
    state.list = dealArray(res.data);
};
const dealArray = (data: any) => {
    let arr: any = [];
    let childArr: any = [];
    data.forEach((item: any) => {
        if (!item.parent_id) {
            item.child = [];
            arr.push(item);
        } else childArr.push(item);
    });
    childArr.forEach((item: any) => {
        arr.forEach((arrItem: any) => {
            if (arrItem._id == item.root_id) arrItem.child.push(item);
        });
    });
    return arr;
};
const openReply = (id: any, e: any) => {
    state.replyId = id;
    nextTick(() => {
        e.path[2].querySelector(".center .reply .el-textarea .el-textarea__inner").focus();
    });
};
const closeReply = () => {
    state.replyId = null;
};
</script>
<template>
    <div class="comment-warp">
        <div class="line"></div>
        <div class="title">发 表 您 的 意 见</div>
        <el-input v-model="state.content" :rows="5" type="textarea" placeholder="良言一句三冬暖，恶语伤人六月寒。" />
        <div style="display: flex; justify-content: right; margin-top: 10px">
            <el-button type="primary" @click="reply()" :loading="state.loading_submit"> 确 认 提 交</el-button>
        </div>
        <div class="comment-num">{{ state.list.length }}评论</div>
        <el-skeleton :rows="5" animated v-if="state.list.length === 0" />
        <div v-else style="border:1px solid var(--c-border);padding: 20px;border-radius: 10px;">
            <div class="comment-item" v-for="(item, index) in state.list" :key="index" style="margin-top: 10px">
                <div class="root-comment">
                    <img v-if="item.avatar" class="avatar" style="margin-right: 20px" :src="item.avatar" />
                    <img v-else class="avatar" style="margin-right: 20px" src="../assets/imgs/avatar_common.jpg" />
                    <div class="center" style="flex: 1">
                        <div style="display: flex">
                            <div class="name" style="font-weight: 700; margin-right: 20px">
                                {{ item.name }}
                                <el-tag v-if="useStore.adminId.includes(item.userId)" size="small" style="margin-left: 5px">
                                    作者</el-tag>
                            </div>
                            <div class="time" style="color: var(--c-text-2); font-size: 12px">
                                {{ util.formatTimeLater(item.createTime) }}
                            </div>
                        </div>
                        <v-md-preview :text="item.content" ref="preview"></v-md-preview>
                        <div class="reply" :ref="'focus' + index"
                            :style="{ marginBottom: '10px', display: item._id === state.replyId ? 'block' : 'none' }">
                            <el-input v-model="state.reply" :rows="2" type="textarea" :placeholder="`回复@${item.name}`"
                                style="margin-bottom: 10px" />
                            <div class="reply-bottom" style="display: flex; justify-content: right">
                                <el-button type="primary" @click="reply(item)" :loading="state.loading_reply"> 发布
                                </el-button>
                            </div>
                        </div>
                    </div>
                    <el-button class="btn-reply" @click="(e: any) => {
                        item._id === state.replyId ? closeReply() : openReply(item._id, e);
                    }
                        " style="position: absolute; right: 0; top: 0" text type="primary">
                        {{ item._id === state.replyId ? "收起" : "回复" }}
                    </el-button>
                </div>
                <div class="reply-warp" v-for="(item2, index2) in item.child" :key="item2._id">
                    <img v-if="item.avatar" class="avatar" style="width: 40px; height: 40px; margin-right: 10px"
                        :src="item2.avatar" />
                    <img v-else class="avatar" style="width: 40px; height: 40px; margin-right: 10px"
                        src="../assets/imgs/avatar_common.jpg" />
                    <div class="center" style="flex: 1">
                        <div class="name">
                            <span style="font-weight: 700">{{ item2.name }} <el-tag
                                    v-if="useStore.adminId.includes(item2.userId)" size="small" style="margin-left: 5px">
                                    作者</el-tag></span>
                            <span v-if="item2.parent_id !== item2.root_id">
                                &nbsp;&nbsp; 回复 &nbsp;&nbsp;
                                <span style="font-weight: 700">{{ item.child.find((findItem: any) => findItem._id ===
                                    item2.parent_id).name }}
                                </span>
                            </span>
                            <span class="time" style="color: var(--c-text-2); margin-left: 20px; font-size: 12px">
                                {{ util.formatTimeLater(item2.createTime) }}
                            </span>
                        </div>
                        <v-md-preview :text="item2.content" ref="preview"></v-md-preview>
                        <v-md-preview class="reply" v-if="item2.parent_id !== item2.root_id"
                            :text="`“${item.child.find((findItem: any) => findItem._id === item2.parent_id).content}”`"
                            ref="preview"></v-md-preview>
                        <div class="reply"
                            :style="{ marginBottom: '10px', display: item2._id === state.replyId ? 'block' : 'none' }">
                            <el-input :ref="'focus' + index2" v-model="state.reply" :rows="2" type="textarea"
                                placeholder="良言一句三冬暖，恶语伤人六月寒。" style="margin-bottom: 10px" />
                            <div class="reply-bottom" style="display: flex; justify-content: right">
                                <el-button type="primary" @click="reply(item2, item)"
                                    :loading="state.loading_reply">发布</el-button>
                            </div>
                        </div>
                    </div>
                    <el-button class="btn-reply" @click="(e: any) => {
                        item2._id === state.replyId ? closeReply() : openReply(item2._id, e);
                    }
                        " style="position: absolute; right: 10px; top: 10px" text type="primary">
                        {{ item2._id === state.replyId ? "收起" : "回复" }}
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.comment-warp {
    background-color: var(--c-bg-box);
    padding: 20px;


    .line {
        height: 4px;
        border: 0;
        background-color: var(--c-text-disabled);
        margin: 20px 0;
    }

    .title {
        font-size: 24px;
        font-weight: 700;
        color: var(--el-color-primary);
        text-align: center;
        margin-bottom: 20px;
    }

    .comment-num {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .root-comment {
        display: flex;
        position: relative;
        padding: 10px;

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 100%;
            cursor: pointer;
            transition: 0.3s;

            &:hover {
                box-shadow: 0px 0px 8px 0px rgba($color: #000000, $alpha: 0.5);
            }
        }

        .active {
            display: block;
        }

        .btn-reply {
            opacity: 0;
            transition: all 0.3s;
        }

        &:hover .btn-reply {
            opacity: 1;
        }
    }

    .reply-warp {
        position: relative;
        margin-left: 50px;
        background-color: var(--c-bg-text);
        padding: 20px 20px 10px 20px;
        display: flex;

        .btn-reply {
            opacity: 0;
            transition: all 0.3s;
        }

        &:hover .btn-reply {
            opacity: 1;
        }
    }
}
</style>
<style lang="scss">
.comment-warp .v-md-editor-preview .vuepress-markdown-body {
    padding: 5px;
    color: var(--c-text-2);
    p {
        margin-bottom: 0;
    }

    margin-bottom: 5px;
}

.comment-warp .reply .vuepress-markdown-body {
    background-color: var(--c-bg-text-dis);
    border: 1px solid var(--c-bg-border-dis);
    color: var(--c-text-3);

    p {
        margin-bottom: 0;
        font-size: 14px;
    }
}
</style>
